<template>
  <div class="infinite-container" style="top:0;">

    <div class="login-header" v-show="isDoctor">
      <mu-row class="doctor-info">
        <mu-col width="40">
           <fallback-image :alt="doctor.doctorName" :src="DOCTOR_AVATAR+doctor.localDoctorId+'.jpg'"></fallback-image>
        </mu-col>
        <mu-col width="60">
          <h1>{{doctor.doctorName}}</h1>
          <div>{{doctor.doctorLevelText}}</div>
          <div>科室：{{dept.deptName}}</div>
          <div>擅长：{{doctor.speciality || '暂无数据'}}</div>
        </mu-col>
      </mu-row>
    </div>

    <div class="content-box" v-show="isDoctor">
      <router-link to="/appointment/doctor-more">
        <div class="content-title sprites">
          医生简介
        </div>
        <div class="arrow">
          <i class="icon-arrowright iconfont"></i>
        </div>
      </router-link>
      <div class="content-content ">
         <div style="padding:1em;">
          <div class="doctor-detail" v-html="doctor.introduce || '暂无数据'">
            
          </div>
        </div>
      </div>
    </div>

    <div class="content-box mt10">
      <div class="content-title sprites">
        预约挂号
      </div>
      <div class="content-content">

        <div class="select-time-info bgwhite">
          <mu-row style="flex-wrap:nowrap;">
            <div class="time-harfday">
              <div>日期</div>
              <mu-divider></mu-divider>
              <div>上午</div>
              <mu-divider></mu-divider>
              <div class="afternoon">下午</div>
            </div>
            <div class="time-fullday" style="overflow:hidden;">
              <div :style="'width:'+scrollWrapperWidth+';'" ref="scrollWrapper">
                <ul>
                  <li v-for="(day, i) in days" :style="'width:'+liWidth+';'" :class="['head', i===0 ? 'headActive' : '']" :key="day.orderDate"> 
                    <div>{{day.orderWeek2}}</div>
                    <div>{{day.orderDate1}}</div>
                  </li>
                  <li v-for="item in timeAM" :style="'width:'+liWidth+';'" :key="item.name" :class="['foot', item.active ? 'footActive' : '', item.dis ? 'footDis' : '']" @click="appoint(item)"> 
                    <div>{{item.name}}</div>
                  </li>
                   <li v-for="item in timePM" :style="'width:'+liWidth+';'" :key="item.name" :class="['foot', item.active ? 'footActive' : '', item.dis ? 'footDis' : '']" @click="appoint(item)"> 
                    <div>{{item.name}}</div>
                  </li>
                </ul>
              </div>
            </div>
          </mu-row>
        </div>

      </div>
    </div>

    <div class="content-box mt10" v-show="isDoctor">
      <div class="content-title sprites">
        开通服务
      </div>
      <div class="content-content pd10">
        <mu-flexbox class="mt20 center"> 
          <mu-flexbox-item v-if="'2' === doctorService[0]">
            <i class="sprites bg_appoint"></i>
            <div class="mt10">预约挂号</div>
          </mu-flexbox-item>
          <mu-flexbox-item v-if="'2' === doctorService[1]">
            <i class="sprites bg_zhenshi"></i>
            <div class="mt10">云诊室</div>
          </mu-flexbox-item>
          <mu-flexbox-item v-if="'2' === doctorService[2]">
            <i class="sprites bg_message"></i>
            <div class="mt10">离线咨询</div>
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
    </div>

  <!--  dialog -->
  <mu-dialog :open="dialog" title="请选择预约时间段" @close="close" dialogClass="appoint-dialog" scrollable>
    <select-time :times="times"></select-time>
    <div slot="actions" class="dialog-close" @click="close">x</div>
  </mu-dialog>

  <!--  dialog  tips-->
  <mu-dialog :open="famuse_doctor_tips" title="温馨提示" @close="famuse_doctor_tips=false" dialogClass="appoint-dialog" scrollable>
    <p class="t5">{{FAMUSE_DOCTOR_TIPS}}</p>
    <p class="center">
      <img src="../../assets/qrcode2.png" width="160" />
    </p>
    <div slot="actions" class="dialog-close" @click="famuse_doctor_tips=false">x</div>
  </mu-dialog>

  </div>
</template>

<script>
import {commonAjax, ORG_ID, PLATFORM_PREFIX, DOCTOR_LEVEL, FAMUSE_DOCTORS, FAMUSE_DOCTOR_TIPS, DOCTOR_AVATAR} from '../../api/api'
import SelectTime from '../../components/SelectTime'
import FallbackImage from '../../components/FallbackImage'
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      doctor: JSON.parse(localStorage.doctor),
      dept: JSON.parse(localStorage.dept),
      days: [],
      times: [],
      timeAM: [],
      timePM: [],
      DOCTOR_LEVEL: DOCTOR_LEVEL,
      doctorService: '',
      Orders: {
        price: ''
      },
      DOCTOR_AVATAR: DOCTOR_AVATAR,
      dialog: false,
      activeClass: false,
      famuse_doctor_tips: false,
      FAMUSE_DOCTORS: FAMUSE_DOCTORS,
      FAMUSE_DOCTOR_TIPS: FAMUSE_DOCTOR_TIPS,
      scrollWrapperWidth: '128%',
      liWidth: '14.25%'
    }
  },
  computed: {
    isDoctor () {
      return this.doctor.doctorName !== undefined
    }
  },
  mounted () {
    let _this = this
    this.$store.commit('UPDATE_TITLE', this.isDoctor ? '医师主页' : '科室主页')
    this.doctorService = (this.doctor.doctorService || '2|2|2').split('|')
    this.$store.commit('UPDATE_LOADING')
    commonAjax(
      [ORG_ID, '', '', 1],
      `${PLATFORM_PREFIX}.registrationService`,
      'getTimePeriod'
    ).then(res => {
      if (res.data.code === 200) {
        this.days = res.data.body
        this.liWidth = 100 / this.days.length + '%'
        this.scrollWrapperWidth = 18 * this.days.length + '%'
        for (let i = 0; i < this.days.length; i++) {
          this.timeAM.push({
            name: '',
            active: false,
            dis: false
          })
          this.timePM.push({
            name: '',
            active: false,
            dis: false
          })
        }
        this.$nextTick(() => { this._initScroll() })
        // 根据医生`localDoctorId`获取列表
        commonAjax(
          [
            ORG_ID,
            this.doctor.localDoctorId || '',
            this.doctor.outDeptId || '',
            '',
            '',
            this.doctor.regDeptId,
            '',
            '',
            this.doctor.localDeptId,
            this.dept.deptId,
            '',
            localStorage.appointType
          ],
          `${PLATFORM_PREFIX}.registrationService`,
          'getDoctorDeptList'
        ).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            this.days.forEach((day, index) => {
              res.data.body.forEach(value => {
                _this.getSameDay(day, index, value)
              })
            })
          }
        })
      }
    })
  },
  methods: {
    getSameDay (day, index, value) {
      let _this = this
      if (day.orderDate === value.workDate) {
        if (value.planTime === '1') {
          if (value.stopFlag === '1') {
            _this.timeAM.splice(index, 1, {name: '停诊', dis: true})
          } else if (value.status === '2') {
            _this.timeAM.splice(index, 1, {name: '约满', dis: true})
          } else if (value.status === '3') {
            _this.timeAM.splice(index, 1, {name: '现场号', dis: true})
          } else {
            _this.timeAM.splice(index, 1, {name: '挂号', active: true, doctor: value})
          }
        } else {
          if (value.stopFlag === '1') {
            _this.timePM.splice(index, 1, {name: '停诊', dis: true})
          } else if (value.status === '2') {
            _this.timePM.splice(index, 1, {name: '约满', dis: true})
          } else if (value.status === '3') {
            _this.timePM.splice(index, 1, {name: '现场号', dis: true})
          } else {
            _this.timePM.splice(index, 1, {name: '挂号', active: true, doctor: value})
          }
        }
      }
    },
    confirmClick (item) {
      this.$router.push('/appointment/confirm-appoint')
    },
    close () {
      this.dialog = false
    },
    appoint (item) {
      if (!item.active) {
        return
      }
      if (item.doctor.doctorName) {
        if (FAMUSE_DOCTORS.indexOf(item.doctor.doctorName) > -1) {
          this.famuse_doctor_tips = true
          return
        }
      }
      // 排班列表没有doctorId
      item.doctor.localDoctorId = this.doctor.localDoctorId
      localStorage.doctor = JSON.stringify(item.doctor)
      this.$store.commit('UPDATE_LOADING')
      commonAjax(
        [ORG_ID, item.doctor.localRegDeptId, item.doctor.localDoctorId, item.doctor.workDate, item.doctor.seqId, localStorage.appointType],
        `${PLATFORM_PREFIX}.registrationService`,
        'getDocAndDeptSouce'
      ).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200 && res.data.body.length > 0) {
          this.dialog = true
          this.times = res.data.body
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: '暂无号源'
          })
        }
      })
    },
    canOrderHandle () {
      this.showRange = true
      this.$store.commit('UPDATE_LOADING')
      commonAjax(
        [ORG_ID]
      ).then(res => {
        if (res.data.code === 200) {
          let d = res.data.Orders
          this.Orders = d[0]
        }
        this.$nextTick(() => {
          this.$store.commit('UPDATE_LOADING')
        })
      })
    },
    _initScroll () {
      this.scroll = new BScroll(this.$refs.scrollWrapper, {
        click: true,
        scrollX: true
      })
    }
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_TITLE')
  },
  components: {SelectTime, FallbackImage}
}
</script>
<style lang="less">
@import '../../common/css/vars.less';
.doctor-info {
  padding: 1em;
  img {
    width: 100px;
    height: auto;
  }
  h1 {
    font-size: 1.2em;
    font-weight: normal;
    color: @color-primary;
    margin: 0 0 8px;
  }
}
.doctor-detail {
   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.select-time-info {
  text-align: center;
  border-bottom: 1px solid @color-border;
  .time-harfday {
    div {
      padding:4px 10px;
      color: #999;
    }
  }
  .time-fullday {
    li {
      float: left;
      width: 14.25%;
      border-left:1px solid @color-border;
      border-bottom:1px solid @color-border;
      padding: 4px;
      height: 51px;
      &.active{
        color: @color-primary;
        background: @color-lite;
      }
      &.head{
        border-left:none;
        &.headActive{
          color: @color-primary;
        }
      }
      &.foot{
        line-height: 43px;
        color: #999;
        &.footActive{
          color: @color-primary;
          background: #FFF5EB;
        }
        &.footDis{
          color: @color-gray;
          background: #d5d5d5;
        }
      }
    }
    
  }
}
</style>
